/*
 * 首页模板
 *
 *
 *
 */
//dependence jquery.js
//dependence slider.js
//dependence circle.js

wky_define("wky.template.homePage", function(homePage){
    var pannel = $("<div></div>");
    var searchPannel = $('<div class="search-pannel"></div>').append('<div class="search"><input class="keyword" type="text" title="输入搜索" /><input class="submit" type="button" title="搜索" /></div>');
    var navPannel = $('<div class="nav-pannel"></div>');
    var notifyPannel = $('<div class="notify-pannel"></div>');
    var clientSize = wky.config.clientSize;
    
    pannel.css({
        height: clientSize.height,
        width: clientSize.width,
        overflow: "hidden"
    });
    //调整到中间位置
    var animatToCenter = function(ele, css, callback, time){
        if (!ele || !css) {
            return;
        }
        ele.animate(css, {
            duration: time || 1500,
            complete: function(){
                callback && callback.apply(this, [].slice.call(arguments));
            }
        });
    }
    
    //如果当前屏幕高度仅仅只够显示一个项目高度，则其他项目自动隐藏
    var autoAdapt = function(nav, notity){
        nav = nav ||
        function(){
        };
        notity = notity ||
        function(){
        };
        //search 300
        if (clientSize.height > 200 && clientSize.height < 500) {
            //调整搜索框位置
            var css = {
                marginTop: (clientSize.height - 200) / 2
            };
            navPannel.hide();
            notifyPannel.hide();
            animatToCenter(searchPannel, css, function(){
                //console.log("i am over!!s");
            });
            navPannel.hide();
            notifyPannel.hide();
        }
        else 
            if (clientSize.height < 800) {
                //导航框自动居中,搜索框不变
                notifyPannel.hide();
                nav();
            }
            else {
                nav();
                notity();
            }
        //快速导航 300
    }
    
    var getABlockCircle = function(){
        var cl = circle.add({
            radius: 131 - 16,
            stepLen: 32,
            relativeX: 262 / 2 - 16,
            relativeY: 262 / 2 - 16,
        });
		return cl;
    }
    
    //创建一个导航滑块
    var setNav = function(){
        //生成测试数据
        var blk = $('<div></div>'), idx = "";
        for (var i = 0; i < 5; i++) {
			var bc = getABlockCircle();
            blk.append(bc.circleEle.circle);
			//blk += '<div my-turn="' + i + '" style="width:400px; height:300px; position:relative; float:left; background:rgb(' + (10 + i * 10) + ',' + (10 + i * 15) + ',' + (10 + i * 4) + ');"></div>'
        }
		
        var bkNum = 5;
        var sliderWidth = 300;//每个滑块的宽度
        var everyPageNum = parseInt(clientSize.width / 400);//每页可容纳多少滑块
        var pageNum = Math.ceil(bkNum / everyPageNum);
        for (var i = 0; i < pageNum; i++) {
            idx += '<div my-turn="' + i + '" style="width:22px; height:32px; position:relative; float:left;"><div class="home-page-temp-circle"></div></div>';
        }
		
        //生成滑块
        var navSlider = slider.add({
            pannel: {
                css: {
                    width: parseInt(clientSize.width / 400) * 400,
                    height: 268,
                    overflow: "hidden",
                    position: "relative"
                },
                cnt: blk.html(),
            },
            sliderDirection: "h",
            stepDistance: "pannel"
        });
        //生成索引头
        var idxPannel = $('<div class=""><div class="home-page-temp-prev"></div><div class="home-page-temp-next"></div></div>');
        var idxSlider = $('<div></div>').css({
            height: 32,
            width: 436,
            overflow: "hidden",
            position: "relative",
            marginLeft: 32
        });
        var innerWaper = $("<div></div>").css({
            height: 32,
            width: pageNum * 22,
            margin: "0 auto 0 auto"
        });
		
        //调整索引位置
        idxPannel.css({
            width: 500,
            height: 32,
            opacity: "0",
            position: "relative",
        });
		
        //附加索引内容
        innerWaper.html(idx);
        idxPannel.append(idxSlider.append(innerWaper));
        navPannel.append(idxPannel).append(navSlider.pannel.pannelEle);
        //索引项移动到中心位置
        animatToCenter(idxPannel, {
            marginLeft: (clientSize.width - idxPannel.width()) / 2,
            opacity: "1"
        });
        //导航位置居中
        animatToCenter(idxPannel, {
            marginLeft: (clientSize.width - idxPannel.width()) / 2,
            opacity: "1"
        });
        animatToCenter(navSlider.pannel.pannelEle, {
            marginLeft: (clientSize.width - navSlider.pannel.pannelEle.width()) / 2,
            opacity: "1"
        });
        //点击右边向右，点击左边想左
        navPannel.delegate("div[my-turn]", "click", function(evt){
            var turnNum = $(this).attr("my-turn");
            navSlider.next();
			var cl = getABlockCircle();
			navSlider.addContent(cl.circleEle.circle);
			cl.circleEle.circle.click(function(){
				var that = $(this);
				var id = that.attr("id");
				circle.get(id).addSmallCnt('<span class="weibo"></span>');
			});
        });
		//添加元素
    }
    
    var setNotify = function(){
    
    
    }
    
    pannel.append(searchPannel).append(navPannel).append(notifyPannel);
    //自动配置相应的组建,根据需要配置页面
    autoAdapt(function(){
        //设置导航
        setNav();
    }, function(){
        setNotify();
    });
    
    
    return {
        varName: "search",
        varVal: pannel
    }
})
